<template>
	<view class="container" :style="data.inputHeight>0?'position: absolute;bottom:'+data.inputHeight + 'px':''">
		<u-navbar title="项目经历" placeholder></u-navbar>
		<u-form :model="data.formData" :error-type="['toast']" ref="form1"
			:style="data.inputHeight==0?'padding-bottom: 140rpx;':''">
			<u-form-item required label="项目名称" prop="projectname" label-position="top">
				<view class="u-flex u-flex-1 u-row-between">
					<u-field :placeholder-style="data.placeholderStyle" :border-bottom="false" label-width="0"
						v-model="data.formData.projectname" placeholder="请输入公司名称" />
				</view>
			</u-form-item>
			<u-form-item required label="担任角色" prop="role" label-position="top">
				<view class="u-flex u-flex-1 u-row-between">
					<u-field :placeholder-style="data.placeholderStyle" :border-bottom="false" label-width="0"
						v-model="data.formData.role" placeholder="请输入职位名称" />
				</view>
			</u-form-item>

			<u-form-item required label="入职时间" prop="starttime" label-position="top">
				<view class="u-flex u-flex-1 u-row-between">
					<u-input :placeholder-style="data.placeholderStyle" v-model="data.formData.starttime"
						placeholder="请选择入职时间" disabled @click="data.isstarttime=true" />
					<u-icon name="arrow-right" color="#bbbbbb" size="40" @click="data.isstarttime=true"></u-icon>
				</view>
			</u-form-item>
			<u-form-item required label="离职时间" prop="endtime_text" label-position="top" style="position: relative;">
				<view class="u-flex u-flex-1 u-row-between">
					<u-input :placeholder-style="data.placeholderStyle" v-model="data.formData.endtime_text"
						placeholder="请选择离职时间" disabled @click="data.isendtime=true" />
					<u-checkbox style="position: absolute;top: 24rpx;right: 0;" shape="circle" @change="enterjobtime"
						v-model="data.thisyear"><text style="white-space: nowrap !important;">至今</text></u-checkbox>
					<u-icon name="arrow-right" color="#bbbbbb" size="40" @click="data.isendtime=true"></u-icon>
				</view>
			</u-form-item>
			<u-form-item required label="项目描述" prop="description" label-position="top">
				<view style="width: 100%;">
					<!-- <textarea :auto-blur="true" :placeholder-style="data.placeholderStyle" @input="getnum"
						style="width: 100%;font-size: 28rpx;" v-model="data.formData.description" :maxlength="500"
						placeholder="简单描述下你的项目" /> -->

					<!-- #ifdef APP-PLUS || H5 -->
					<textarea @keyboardheightchange="getInput" :auto-blur="true" :adjust-position="false"
						:placeholder-style="data.placeholderStyle" style="width: 100%;font-size: 28rpx;"
						v-model="data.formData.description" :cursor-spacing="0" :maxlength="500" placeholder="简单描述下你的项目"
						@input="getnum" />
					<!-- #endif -->
					<!-- #ifdef MP-WEIXIN -->
					<textarea :auto-blur="true" :placeholder-style="data.placeholderStyle"
						style="width: 100%;font-size: 28rpx;" v-model="data.formData.description" :maxlength="500"
						placeholder="简单描述下你的项目" @input="getnum" />
					<!-- #endif -->
					<view class="currentWordNumber">{{data.currentWordNumber}}/500</view>
				</view>
			</u-form-item>
		</u-form>
		<view class="bottomBoxBtn">
			<u-button  hoverClass="none" :customStyle="data.customStyle" @click="$u.throttle(submit,2000)">保存</u-button>
			<view class="delete" v-if="data.type=='edit'" @click="data.dele =true"><text>删除此条项目经历</text></view>
		</view>
		<!-- 入职时间 -->
		<u-picker v-model="data.isstarttime" :params="data.params" @confirm="starttimeConfirm"
			:default-time="data.formData.starttime?$u.timeFormat(new Date(data.formData.starttime), 'yyyy-mm-dd'):$u.timeFormat(new Date(), 'yyyy-mm-dd')"
			mode="time"></u-picker>
		<!--离职时间 -->
		<u-picker v-model="data.isendtime" :params="data.params" @confirm="endtimeConfirm"
			:default-time="data.formData.endtime?$u.timeFormat(new Date(data.formData.endtime), 'yyyy-mm-dd'):$u.timeFormat(new Date(), 'yyyy-mm-dd')"
			mode="time"></u-picker>

		<u-modal @confirm="educationDelete" title="系统提示" :mask-close-able="true" :title-style="data.titleStyle"
			:show-cancel-button="true" v-model="data.dele">
			<view class="slot-content"
				style="height: 200rpx; display: flex;align-items: center;justify-content: center;">
				<text>确定删除该条项目经历吗？</text>
			</view>
		</u-modal>
	</view>
</template>

<script setup>
	import {
		ref,
		reactive
	} from "vue"
	import {
		onReady,
		onShow,
		onLoad,
		onHide
	} from '@dcloudio/uni-app'
	const form1 = ref();
	const data = reactive({
		customStyle:{
			color:'#fff',
			background:'#00d075',
			bordern:'none'
		},
		params: {
			year: true,
			month: true,
			day: false,
			hour: false,
			minute: false,
			second: false
		},
		titleStyle: {
			'font-size': '32rpx',
			'color': '#000',
			'font-weight': 'bold'
		},
		isNav: true,
		type: "",
		rules: {
			projectname: [{
				required: true,
				message: '请输入项目名称',
				// 可以单个或者同时写两个触发验证方式 
				trigger: 'blur',
			}],
			role: [{
				required: true,
				message: '请输入担任角色',
				// 可以单个或者同时写两个触发验证方式 
				trigger: 'change',
			}],

			starttime: [{
				required: true,
				message: '请选择入职时间',
				// 可以单个或者同时写两个触发验证方式 
				trigger: 'change',
			}],
			endtime_text: [{
				required: true,
				message: '请选择离职时间',
				// 可以单个或者同时写两个触发验证方式 
				trigger: 'change',
			}],
			description: [{
				required: true,
				message: '请填写项目描述',
				// 可以单个或者同时写两个触发验证方式 
				trigger: 'change',
			}]
		},
		formData: {
			projectname: '',
			role: '',
			description: '',
			starttime: "",
			endtime: "",
			todate: 0,
			endtime_text: ""
		},
		labelStyle: {
			'font-size': '36rpx',
			'color': '#000'
		},
		isstarttime: false,
		isendtime: false,
		thisyear: false,
		dele: false,
		placeholderStyle: "color: #c0c4cc;font-size: 28rpx;",
		currentWordNumber: 0,
		inputHeight: 0
	})

	const enterjobtime = (e) => {
		if (e.value) {
			data.formData.endtime = 0
			data.formData.endtime_text = uni.$u.timeFormat(new Date(), 'yyyy-mm')
			data.formData.todate = 1
		} else {
			data.formData.todate = 0
			data.formData.endtime_text = ""
		}
	}

	const starttimeConfirm = (e) => {
		data.formData.starttime = e.year + '-' + e.month
	}
	const endtimeConfirm = (e) => {
		data.formData.endtime = e.year + '-' + e.month
		let nowdate = uni.$u.timeFormat(new Date(), 'yyyy-mm')
		if (data.formData.endtime == nowdate) {
			data.thisyear = true;
			data.formData.todate = 1
			data.formData.endtime_text = uni.$u.timeFormat(new Date(), 'yyyy-mm')
			data.formData.endtime = 0
		} else {
			data.thisyear = false;
			data.formData.todate = 0
			data.formData.endtime_text = e.year + '-' + e.month
		}
	}
	// 保存
	const submit = () => {
		form1.value.validate(async valid => {
			if (valid) {
				let res = await uni.$u.api.projectSave(data.formData)
				if (res) {
					uni.$u.toast(data.type == 'edit' ? '修改成功' : '添加成功')
					setTimeout(() => {
						uni.$u.route({
							type: 'back'
						})
					}, 1000)
				}
			}
		});
	}

	const educationDelete = async () => {
		let params = {
			id: data.formData.id
		}
		let res = await uni.$u.api.projectDelete(
			params
		)
		if (res) {
			uni.$u.toast("删除成功")
			setTimeout(() => {
				uni.$u.route({
					type: 'back'
				})
			}, 1000)
		}
	}
	const getnum = (e) => {
		var value = e.detail.value;
		var len = parseInt(value.length);
		if (len > 500) {
			data.formData.description = value.slice(0, 500)
			data.currentWordNumber = 500
		} else {
			data.currentWordNumber = len
		}
	}
	onReady(() => {
		form1.value.setRules(data.rules)
	})
	onLoad(({
		item,
		type
	}) => {
		data.type = type
		if (type == "edit") {
			let code = decodeURIComponent(item)
			data.formData = JSON.parse(code)
			data.formData.starttime = uni.$u.timeFormat(new Date(data.formData.starttime * 1000), 'yyyy-mm')
			data.formData.endtime = uni.$u.timeFormat(new Date(data.formData.endtime * 1000), 'yyyy-mm')
			data.formData.endtime_text = uni.$u.timeFormat(new Date(data.formData.endtime), 'yyyy-mm')
			if (data.formData.todate == 1) {
				data.thisyear = true
				data.formData.endtime = 0
				data.formData.endtime_text = uni.$u.timeFormat(new Date(), 'yyyy-mm')
			}

			let len = parseInt(data.formData.description.length)
			data.currentWordNumber = len
		}


	})

	const getInput = (event) => {
		data.inputHeight = event.detail.height
		console.log(data.inputHeight)
	}
</script>

<style lang="scss">
	page,
	body {
		width: 100vw;
		height: 100%;
		background-color: #fff;
	}

	.container {
		padding: 30rpx;
		width: 100%;

		.delete {
			height: 70rpx;
			line-height: 70rpx;
			text-align: center;

			text {
				color: #867F7F;
				font-size: 24rpx;
			}
		}
	}

	:deep .u-flex-1 {
		margin-left: 0 !important;
	}

	.currentWordNumber {
		text-align: right;
	}

	:deep .u-field__input-wrap {
		width: 500rpx !important;
	}

	.bottomBoxBtn {
		// height: 140rpx;
		width: calc(100% - 60rpx);
		background-color: #fff;
		position: fixed;
		bottom: 0;
		padding: 30rpx 0;
		z-index: 999;
	}
</style>